<template>
  <div class="home">
    <v-touch v-on:swipeup="hide" class="touchdown" v-on:swipedown="show">
     <router-view class="rot"></router-view>
      <transition name="up">
        <bottom-bar class="bot" v-if="showMask"></bottom-bar>
      </transition>
    </v-touch>
  </div>
</template>

<script>
import BottomBar from "@/components/home/BottomBar";
export default {
  data(){
    return{
      showMask:true,
    }
  },
  components:{
    BottomBar,
  },
  methods:{
    hide(){
      this.showMask=false
    },
    show(){
      this.showMask=true
    }
  }
}
</script>


<style>
.home .touchdown{
  touch-action: pan-y !important;
}

.up-enter-active,.up-leave-active{
  transition: all .5s;
}
.up-enter,.up-leave-to{
  opacity: 1;
  transform: translateY(100%);
}


</style>